<template>
  <el-dialog :close-on-click-modal="false"   :title="form.id ? '编辑' : '新增'" :visible="show" :before-close="close">
    <el-form ref="form" :model="form" :rules="rules" label-width="150px">
      <el-form-item label="车牌号：" prop="carCode">
        <SelectByApi v-model="form.carCode" :valueFiled="`code`" :labelFiled="`code`" :api="getList" :params="{pageSize: 999}"  @change="onChangeCarCode"></SelectByApi>
      </el-form-item>
      <el-form-item label="年检时间：" prop="dateStart">
        <SelectDateRange type="datetimerange" :valueFormat="`yyyy-MM-dd HH:MM:ss`" :start.sync="form.dateStart" :end.sync="form.dateEnd"></SelectDateRange>
      </el-form-item>
      <el-form-item label="年检金额：" prop="totalFee">
        <el-input v-model="form.totalFee" type="text" placeholder="请输入">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="年检公司：" prop="merchant">
        <el-input v-model="form.merchant" type="text" placeholder="请输入"></el-input>
      </el-form-item>
      <!-- <el-form-item label="年检地址：" prop="address">
        <el-input v-model="form.address" type="text" placeholder="请输入"></el-input>
      </el-form-item> -->
      <el-form-item label="年检内容描述：" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="经办人：" prop="reporter">
        <SelectByApi v-model="form.reporter" :label.sync="form.reporterName" :api="memberList" :params="{pageSize: 999}"></SelectByApi>
      </el-form-item>
      <el-form-item label="经办日期：" prop="gmtHappen">
        <el-date-picker  v-model="form.gmtHappen"  type="date" value-format="yyyy-MM-dd HH:MM:ss"  placeholder="选择日期时间" :picker-options="pickerOptions"></el-date-picker>
      </el-form-item>
      <el-form-item label="图片：" prop="pics">
        <ImageUpload v-model="form.pics" :limit="3"></ImageUpload>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {update, add} from '@/api/carRecord'
import {getList} from '@/api/car'
import { memberList } from "@/api/user";

export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    item: {
      type: Object,
      default:null
    },
  },
  watch: {
    show: {
      handler(nv) {
        if(nv) {
          this.form = this.item || {type: 4, typeName: '年检'}
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      options: [{label: '维修', value: 1},{label: '保单', value: 2},{label: '年检', value: 3}],
      form: {},
      rules: {
        carNo: {required: true, message: '请选择车牌号', trigger: 'change'},
        merchant: {required: true, message: '请输入年检公司', trigger: 'blur'},
        // recordNo: {required: true, message: '请输入保单号', trigger: 'blur'},
        price: {required: true, validator: this.checkPrice, trigger: 'blur'},
        operator: {required: true, message: '请输入经办人', trigger: 'blur'},
        operatorTime: {required: true, message: '请选择经办日期', trigger: 'blur'},
        beginTime: {required: true, message: '请选择时间', trigger: 'change'},
        img: {required: true, message: '请上传图片', trigger: 'change'},
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      }
    }
  },
  methods: {
    getList,
    memberList,
    submit() {
      try {
        this.$refs['form'].validate(async valid => {
          if(valid) {
            const res = this.form.id ? await update(this.form): await add(this.form);
            if(res.code == 1) {
              this.$message.success('操作成功！')
              this.$emit("confirm")
              this.$refs['form'].resetFields();
            }else{
              this.$message.error(res.msg)
            }
          }
        })
      } catch (error) {

      }
    },
    onChangeCarCode(e) {
        this.$set(this.form, 'carTypeName', e.typeName)
        this.$set(this.form, 'carType', e.type)
        this.$set(this.form, 'groupId', e.groupId)
        this.$set(this.form, 'groupName', e.groupName)
        this.$set(this.form, 'groupPath', e.groupPath)
    },
    close() {
      this.$refs['form'].resetFields();
      this.$emit("update:show", false)
    }
  }
}
</script>
